<template>
  <t-dialog :header="header" :confirmBtn="null" :visible.sync="visible" :onClose="closeDialog"     :closeOnOverlayClick="false"
            width="80%" top="5%">
    <div style="height: 65vh">
      <div style="display: flex;font-weight: bold;justify-content: center;font-size: 30px;padding: 30px">
        用户列表
      </div>
      <t-table
        rowKey="id"
        :data="data"
        :columns="columns"
        hover
        :pagination="pagination"
        :loading="dataLoading"
        :selected-row-keys="selectedRowKeys"
        @select-change="(val)=>{selectedRowKeys=val}"
      >
      </t-table>
      <div style="display: flex;font-weight: bold;justify-content: center;gap:10px">
        <t-button :disabled="this.selectedRowKeys.length<=0" @click="joinList" size="large" theme="default" variant="outline"> <t-icon name="arrow-down" slot="icon"></t-icon>分配</t-button>
        <t-button :disabled="this.selectedRowKeys2.length<=0" @click="removeList" size="large" theme="default" variant="outline"> <t-icon name="arrow-up" slot="icon"></t-icon>移出</t-button>
      </div>
      <div style="display: flex;font-weight: bold;justify-content: center;font-size: 30px;padding: 30px">
        已分配用户列表
      </div>
      <t-table
        rowKey="sysUser.id"
        :data="data2"
        :columns="columns2"
        hover
        :loading="dataLoading2"
        :selected-row-keys="selectedRowKeys2"
        @select-change="(val)=>{selectedRowKeys2=val}"
      >
      </t-table>
    </div>
  </t-dialog>
</template>

<script>
import {
  listUser,
} from "@/api/system/user";

export default {
  name: "select-approve-user",
  props: ["header", "objId"],
  data() {
    return {
      dialog:{

      },
      visible: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        // userName: "",
        // nickName: "",
        // phonenumber: "",
        // status: "",
        userType: 2,
        deptId: null,
        dateRange: []
      },
      data: [],
      columns: [
        {
          colKey: 'row-select',
          type: 'multiple',
          width: 64,
        },
        // {
        //   colKey: "id",
        //   title: "用户编号",
        //   align: "center"
        // },
        {
          colKey: "userName",
          title: "登录名称",
          align: "center"
        },
        // {
        //   colKey: "nickName",
        //   title: "真实姓名",
        //   align: "center"
        // },
        {
          colKey: "dept.deptName",
          title: "单位",
          align: "center"
        },
        {
          colKey: 'effectiveStartDate',
          title: '有效开始时间',
          align: 'center'
        },
        {
          colKey: 'effectiveEndDate',
          title: '有效截止时间',
          align: 'center'
        },
        // {
        //   colKey: "phonenumber",
        //   title: "手机号",
        //   align: "center"
        // },
        // {
        //   colKey: "status",
        //   title: "状态",
        //   align: "center"
        // },
        // {
        //   colKey: "createTime",
        //   title: "创建时间",
        //   align: "center",
        //   width: 200,
        // },
        // {
        //   colKey: "op",
        //   title: "操作",
        //   align: "center",
        //   width: 320
        // }
      ],
      columns2: [
        // {
        //   colKey: "id",
        //   title: "用户编号",
        //   align: "center"
        // },
        {
          colKey: "sysUser.userName",
          title: "登录名称",
          align: "center"
        },
        // {
        //   colKey: "nickName",
        //   title: "真实姓名",
        //   align: "center"
        // },
        {
          colKey: "sysUser.dept.deptName",
          title: "单位",
          align: "center"
        },
        {
          colKey: 'sysUser.effectiveStartDate',
          title: '有效开始时间',
          align: 'center'
        },
        {
          colKey: 'sysUser.effectiveEndDate',
          title: '有效截止时间',
          align: 'center'
        },
        // {
        //   colKey: "phonenumber",
        //   title: "手机号",
        //   align: "center"
        // },
        // {
        //   colKey: "status",
        //   title: "状态",
        //   align: "center"
        // },
        // {
        //   colKey: "createTime",
        //   title: "创建时间",
        //   align: "center",
        //   width: 200,
        // },
        // {
        //   colKey: "op",
        //   title: "操作",
        //   align: "center",
        //   width: 320
        // }
      ],
      dataLoading2: false,
      data2:[],
      selectedRowKeys:[],
      selectedRowKeys2: [],
      dataLoading: false,
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        showPageSize: true,
        pageSizeOptions: [10,20,30],
        showFirstAndLastPageBtn: false,
        onChange: (pageInfo) => {
          Object.assign(this.pagination,pageInfo)
          this.queryParams.pageNum = pageInfo.current || 1;
          this.queryParams.pageSize = pageInfo.pageSize;
          this.getList()
        },
      },
    }
  },
  watch: {
    objId: {
      immediate: true,
      handler(val) {
        this.getList();
        this.getBindList();
      }
    }
  },
  methods: {
    joinList(){
      // 上面下面id 一起提交
      // 上面数据移除 id
      const ids = this.data2.map(val=> val.id)
      const projectIds = this.selectedRowKeys.concat(ids)
      this.onSubmit(projectIds);
      this.selectedRowKeys = []
    },
    removeList(){
      const data = this.data2.filter(val => {
        if(!this.selectedRowKeys2.includes(val.sysUser.id)){
          return true
        }
        return false
      })
      const ids = data.map(val=> val.sysUser.id)
      // 如果在选中的则移除
      this.onSubmit(ids);
      this.selectedRowKeys2 = []
    },
    getBindList() {
      this.dataLoading2 = true;
      this.$api.kjxm.approve.ApproveGetByProjectId(this.objId).then((res) => {
        this.data2 = res.data;
        this.dataLoading2 = false;
        // this.selectedRowKeys = this.data2.map(val => val.sysUser.id)
        // this.selectedRowKeys2 =  this.data2.map(val => val.sysUser.id);
        this.getList();
      }).catch((e) => {
        this.dataLoading2 = false
        this.$message.error(e.toString());
      });
    },
    getList() {
      this.dataLoading = true;
      listUser(this.queryParams).then(
        (res) => {
          this.data = res.rows;
          this.pagination.total = res.total;
          this.dataLoading = false;
        }).catch((e) => {
        this.dataLoading = false;
        this.$message.error(e.toString());
      });
    },
    onSubmit(userIds){
      this.$api.kjxm.approve.ApproveaddReviewUser({
        businessId:this.objId,
        userIds
      }).then(response => {
        // this.$message.success("操作成功");
        this.getList();
        this.getBindList();
        // this.$emit("reload");
        // this.$emit("update:visible", false);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    closeDialog() {
      this.$emit("update:visible", false);
    },
  }
}
</script>

<style scoped>

</style>
